<template>
  <div style="text-align: left;">
    <p>第二个详情当前路径：{{ title }}</p>
    <div>
        {{ content }}
   
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            title:"",
            content:"",
            newslist: [
                {
                    "id":"1",
                    "title": "巴黎奥运会开幕式",
                    "createDate": "2024-07-27"
                },
                {
                    "id":"2",
                    "title": "巴黎奥运会开幕式倒计时最后一天",
                    "createDate": "2024-07-26"
                },
                {
                    "id":"3",
                    "title": "巴黎奥运会开幕式倒计时最后二天",
                    "createDate": "2024-07-25"
                }
            ]
        }
    },
    watch:{
        // $route(to, from) {
        //     this.loadDetail(this.$route.params.id);
        // }
    },
    
    methods: {
        loadDetail(id){
            let newDetail =this.newslist.filter(temp=>temp.id==id)[0];
            console.log(newDetail);
            this.content=newDetail.createDate;
            this.title=newDetail.title;
        }
    },
    created() {
        console.log(this.$route.params.id)
        this.loadDetail(this.$route.params.id);
    },
}
</script>

<style>

</style>